<template>
	<div>
		<div class="h-title">
			<hb-title  v-text='Lang.tableTitle[lang][0]' />
			<div class="list-name" v-text="Lang.tableTitle[lang][1]"></div>
		</div>

		<div class="list-item">
			<ul class="ul">
				<li v-for='(item,index) in list' :key="index" class="list-news" :data-id="item.id" @click="newPage(item.articleId)">
					<span v-text="item.articleTitle" />
					<span class="fr" v-text="item.date" />
				</li>
				<li>
					<span class='tr cur' @click="upPage()" v-text="Lang.tableTitle[lang][2]"></span>
					<span class="tr cur" @click="downPage()" v-text="Lang.tableTitle[lang][3]"></span>
				</li>
			</ul>
		</div>
	</div>

</template>

<script>
import {vpost, vlink} from '@api'
import { bus } from '../../../main';
import Lang from './lang.js'
export default {
	data() {
		return {
			page: 1,
			list: '',
            count: 1,
			Lang,
			type:1,
		}
	},
	mounted() {
		bus.$on('which', date => {
			this.id = date
			this.getParams()
		})
    },
    computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {
		this.type = this.$store.state.notice.noticeType
		this.getData()
	},
	methods: {
		getData() {
			if (this.page < 1) {
				this.page = 1
			}
			if (this.page > this.count) {
				this.page = this.count
			}

			//this.type = this.$store.state.notice.noticeType

			let inputdate = {
				type:this.type,
				page:this.page,
			}
			vpost(vlink.newsBytype, inputdate).then(re => {
				if (re != null && re.status === '1') {
					this.list = re.data.articlelist
					this.count = re.data.count
				}
			})
		},
		newPage(id) {
			this.$store.commit('set_notice_which', id)
			this.$router.push({
				path: '/one',
				name: 'bulletin/read',
			})
		},
		upPage() {
			this.page = this.page - 1
			this.getData()
		},
		downPage() {
			this.page = this.page + 1
			this.getData()
		},
	},
};
</script>

<style scoped>
.list-item {
	width: 50%;
	height: 100%;
	background: #181b2a;
	margin: auto;
	padding: 13px 55px;
	/* min-width:901px; */
}
.list-news {
	border-bottom: 1px solid #262a42;
	line-height: 53px;
	color: var(--clr0);
	cursor: pointer;
	border-bottom: 1px solid rgb(97, 104, 138);
}
.fr {
	float: right;
}
.list-news:hover {
	color: #7a98f7;
}
.list-name {
	line-height: 53px;
	background: #1b1e2e;
	border-bottom: 2px solid #11141f;
	color: white;
	padding: 0px 32px;
}
.ul li:last-child {
	text-align: right;
	color: #3b5c7e;
	line-height: 43px;
}
.tr {
	padding: 12px 5px;
}
</style>